<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>实验二</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<div id="root">
    <div class="wrapper">
        <!--产品基本信息-->
        <div class="box" id="info">
            <!--头-->
            <div class="box-header">
                <p class="box-header-title">产品基本信息</p>
            </div>
            <!--内容-->
            <div class="box-content">
                <!--产品名称-->
                <div class="box-content-box">
                    <label for="info-name" class="form-title important">
                        产品名称 <img class="help" src="imgs/help.png" alt="?">
                    </label>
                    <input id="info-name" class="input-long" type="text" placeholder="如：PU女士手提包（CK12002）">
                </div>
                <!--产品型号-->
                <div class="box-content-box">
                    <label for="info-size" class="form-title">
                        产品型号 <img class="help" src="imgs/help.png" alt="?">
                    </label>
                    <input id="info-size" class="input-medium" type="text">
                </div>
                <!--产品图片-->
                <div class="box-content-box">
                    <label class="form-title important">
                        产品图片 <img class="help" src="imgs/help.png" alt="?">
                    </label>
                    <div class="form-column">
                        <!--单选框-->
                        <div class="form-line">
                            <!--单选项-->
                            <input id="info-img-single" name="upload-image" type="radio" value="single">
                            <label for="info-img-single" class="margin-right-18px">上传单张图片</label>
                            <input id="info-img-several" name="upload-image" type="radio" value="several">
                            <label for="info-img-several" class="margin-right-18px">上传多张图片</label>
                            <!--备注-->
                            <p class="tips">您已提交10个多图产品，还可以提交0个</p>
                        </div>
                        <!--上传按钮-->
                        <div class="form-line">
                            <button class="form-button margin-right-12px">本地上传</button>
                            <button class="form-button">从图片库选取</button>
                        </div>
                        <!--备注-->
                        <ul class="tips">
                            <li>最多添加10个多图产品，每个多图产品最多展示6张图片。</li>
                            <li>jpg或jpeg格式；不超过300k。</li>
                        </ul>
                    </div>
                </div>
                <!--关键词-->
                <div class="box-content-box">
                    <label for="info-keyword" class="form-title important">
                        关键词 <img class="help" src="imgs/help.png" alt="?">
                    </label>
                    <div class="form-column">
                        <!--输入关键词-->
                        <div class="form-line">
                            <input id="info-keyword" class="input-medium" type="text">
                            <button class="notice">关键词建议</button>
                        </div>
                        <!--添加关键词-->
                        <div class="form-line">
                            <i></i>
                            <button class="notice">添加更多关键词</button>
                        </div>
                        <!--备注-->
                        <ul class="tips">
                            <li>请在每个文本框中输入一个用于描述您产品关键词，并控制在48个字符内。</li>
                        </ul>
                    </div>
                </div>
                <!--产品类别-->
                <div class="box-content-box">
                    <label class="form-title important">产品类别</label>
                    <div class="form-row">
                        <button class="form-button margin-right-12px">选择目录</button>
                        <p class="nowhere-find">找不到想要的目录？<a class="notice pointer">点这里</a>。</p>
                    </div>
                </div>
                <!--产品分组-->
                <div class="box-content-box">
                    <label for="info-sort" class="form-title">产品分组</label>
                    <select id="info-sort" class="select-medium">
                        <option hidden disabled selected class="disable">请选择产品组</option>
                        <option>分组1</option>
                        <option>分组2</option>
                        <option>分组3</option>
                        <option>分组4</option>
                        <option>分组5</option>
                    </select>
                </div>
                <!--产品描述-->
                <div class="box-content-box">
                    <label class="form-title important">
                        产品描述 <img class="help" src="imgs/help.png" alt="?">
                    </label>
                    <div class="form-column-box">
                        <!--单选 编辑-->
                        <div class="form-line space-between">
                            <div class="left">
                                <input id="diverse-text" type="radio" name="info-describe" value="diverse">
                                <label for="diverse-text" class="margin-right-18px">富文本</label>
                                <input id="plain-text" type="radio" name="info-describe" value="plain">
                                <label for="plain-text" class="margin-right-18px">纯文本</label>
                            </div>
                            <div class="right">
                                <button class="notice">编辑</button>
                            </div>
                        </div>
                        <!--富文本输入框-->
                        <img src="imgs/diverse_box.png" width="696" id="diverse-box" alt="富文本输入框">
                        <!--备注-->
                        <ul class="tips">
                            <li>
                                最多100个产品可使用富文本模式编辑，每个产品最多可以在描述里插入3张图片；jpg或jpeg格式；不超过300k。
                            </li>
                            <li>文本内容控制在60-4000个字符以内。</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--产品贸易-->
        <div class="box" id="trade">
            <!--头-->
            <div class="box-header">
                <div class="left form-row">
                    <p class="box-header-title">产品贸易</p>
                    <p class="tips">详细填写您的报价，让其更易被买家关注。</p>
                </div>
                <div class="right">
                    <input id="is-negotiable" type="checkbox">
                    <label for="is-negotiable">可洽谈</label>
                </div>
            </div>
            <!--内容-->
            <div class="box-content">
                <!--最小起订量 + FOB价格-->
                <div class="box-content-box">
                    <label for="trade-min" class="form-title important">最小起订量</label>
                    <div class="form-row-box">
                        <!--最小起订量-->
                        <div class="form-column">
                            <!--输入价格区间-->
                            <div class="form-line">
                                <input id="trade-min" class="input-short margin-right-8px" type="text">
                                <select id="trade-min-unit" class="select-short">
                                    <option>个</option>
                                    <option>件</option>
                                    <option>只</option>
                                    <option>支</option>
                                    <option>箱</option>
                                    <option>盒</option>
                                    <option>斤</option>
                                    <option>公斤</option>
                                </select>
                            </div>
                            <!--添加价格区间-->
                            <button class="notice">添加价格区间</button>
                        </div>
                        <!--FOB价格-->
                        <div class="form-line">
                            <label for="trade-fob" class="form-title important width-auto">FOB价格(USD)</label>
                            <input id="trade-fob" class="input-short margin-right-8px" type="text">
                            <select id="trade-fob-unit" class="select-short">
                                <option>个</option>
                                <option>件</option>
                                <option>只</option>
                                <option>支</option>
                                <option>箱</option>
                                <option>盒</option>
                                <option>斤</option>
                                <option>公斤</option>
                            </select>
                        </div>
                    </div>
                </div>
                <!--港口-->
                <div class="box-content-box">
                    <label for="trade-port" class="form-title">港口</label>
                    <input id="trade-port" class="input-long" type="text">
                </div>
                <!--支付方式-->
                <div class="box-content-box">
                    <label class="form-title important">支付方式</label>
                    <div class="form-line">
                        <!--L/C-->
                        <div>
                            <input id="pay-lc" type="checkbox">
                            <label for="pay-lc" class="margin-right-18px">L/C</label>
                        </div>
                        <!--T/T-->
                        <div>
                            <input id="pay-tt" type="checkbox">
                            <label for="pay-tt" class="margin-right-18px">T/T</label>
                        </div>
                        <!--D/P-->
                        <div>
                            <input id="pay-dp" type="checkbox">
                            <label for="pay-dp" class="margin-right-18px">D/P</label>
                        </div>
                        <!--Paypal-->
                        <div>
                            <input id="pay-paypal" type="checkbox">
                            <label for="pay-paypal" class="margin-right-18px">Paypal</label>
                        </div>
                        <!--Money Gram-->
                        <div>
                            <input id="pay-mg" type="checkbox">
                            <label for="pay-mg" class="margin-right-18px">Money Gram</label>
                        </div>
                        <!--Western Union-->
                        <div>
                            <input id="pay-wu" type="checkbox">
                            <label for="pay-wu" class="margin-right-18px">Western Union</label>
                        </div>
                        <!--Others-->
                        <div>
                            <input id="pay-others" type="checkbox">
                            <label for="pay-others" class="margin-right-18px">Others</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--展示字段自定义-->
        <div class="box" id="diy">
            <!--头-->
            <div class="box-header">
                <div class="form-row">
                    <p class="box-header-title">展示字段自定义</p>
                    <p class="tips">
                        可以从产品属性、自定义属性、交易条件中选择2个自定义信息用于展示厅产品介绍页面的优先展示。</p>
                </div>
            </div>
            <!--内容-->
            <div class="box-content" style="padding-bottom: 60px">
                <!--交易条件-->
                <div class="box-content-box">
                    <label class="form-title">交易条件</label>
                    <div class="form-line">
                        <!--港口-->
                        <div class="form-item">
                            <input id="diy-condition-port" type="checkbox" checked>
                            <label for="diy-condition-port">港口</label>
                        </div>
                        <!--支付方式-->
                        <div class="form-item">
                            <input id="diy-condition-pay" type="checkbox" checked>
                            <label for="diy-condition-pay">支付方式</label>
                        </div>
                    </div>
                </div>
                <!--产品属性-->
                <div class="box-content-box">
                    <label class="form-title">产品属性</label>
                    <div class="form-line">
                        <div class="form-item">
                            <input id="diy-property-appearance" type="checkbox">
                            <label for="diy-property-appearance">外观</label>
                        </div>
                        <div class="form-item">
                            <input id="diy-property-application" type="checkbox">
                            <label for="diy-property-application">应用</label>
                        </div>
                        <div class="form-item">
                            <input id="diy-property-composition" type="checkbox">
                            <label for="diy-property-composition">成分</label>
                        </div>
                        <div class="form-item">
                            <input id="diy-property-market" type="checkbox">
                            <label for="diy-property-market">目标市场</label>
                        </div>
                    </div>
                </div>
                <!--自定义属性-->
                <div class="box-content-box">
                    <label class="form-title">自定义属性</label>
                    <div class="form-line">
                        <div class="form-item">
                            <input id="diy-diyprop-fob" type="checkbox">
                            <label for="diy-diyprop-fob">FOB</label>
                        </div>
                        <div class="form-item">
                            <input id="diy-diyprop-cfr" type="checkbox">
                            <label for="diy-diyprop-cfr">CFR</label>
                        </div>
                        <div class="form-item">
                            <input id="diy-diyprop-cif" type="checkbox">
                            <label for="diy-diyprop-cif">CIF</label>
                        </div>
                        <div class="form-item">
                            <input id="diy-diyprop-dat" type="checkbox">
                            <label for="diy-diyprop-dat">DAT</label>
                        </div>
                        <div class="form-item">
                            <input id="diy-diyprop-fas" type="checkbox">
                            <label for="diy-diyprop-fas">FAS</label>
                        </div>
                        <div class="form-item">
                            <input id="diy-diyprop-ddp" type="checkbox">
                            <label for="diy-diyprop-ddp">DDP</label>
                        </div>
                        <div class="form-item">
                            <input id="diy-diyprop-dap" type="checkbox">
                            <label for="diy-diyprop-dap">DAP</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>